<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>resize</title>
		<style>
			div {
				width: 300px;
				height: 300px;
				background-color: red;
				border-radius: 50%;

				/*
					resize: 改变尺寸
					vertical: 垂直方向可以改变尺寸;
					horizontal: 水平方向可以改变尺寸;
					auto|both: 水平方向和垂直方向都可以改变尺寸;
				*/
				resize: both;

				/* 
					添加完overflow以后, 元素会触发BFC(块级格式化上下文), 元素会完全成为一个独立的容器, 内部元素无论如何翻江倒海(浮动)都不会影响外部元素
					BFC: Block Formatting Context;
				 */
				overflow: auto;
			}

		</style>
	</head>
	<body>
		<!-- 
			contenteditable: 内容是否可编辑 true: 可以, false: 不可以
		 -->
		<div contenteditable="true"></div>
		
	</body>
</html>